:root {
  --icon-width: calc(48px + 1rem);
}

:local(.formula) {
  composes: bordered rounded my2 from "style";
  background-color: #fbfcfd;
  margin-left: var(--icon-width);
  max-width: 550px;
  cursor: pointer;
}

:local(.formulaHeader) {
  composes: flex align-center text-brand py1 px2 from "style";
}

:local(.formulaTitle) {
  composes: ml2 from "style";
  font-size: 16px;
}

:local(.formulaDefinitionInner) {
  composes: p2 from "style";
}

.formulaDefinition {
  overflow: hidden;
}

.formulaDefinition-enter {
  max-height: 0px;
}
.formulaDefinition-enter.formulaDefinition-enter-active {
  /* using 100% max-height breaks the transition */
  max-height: 150px;
  transition: max-height 300ms ease-out;
}
.formulaDefinition-leave {
  max-height: 150px;
}
.formulaDefinition-leave.formulaDefinition-leave-active {
  max-height: 0px;
  transition: max-height 300ms ease-out;
}
